import React, { Component} from 'react';
import { connect } from 'dva';
import '@ant-design/compatible/assets/index.css';
import { Form,Select,Input,Row,Col,Radio, message,} from 'antd';
import PropTypes from 'prop-types';
import { FormInstance } from 'antd/lib/form';
import GoodsAttriTable  from './goodsAttriTable';


const FormItem = Form.Item;
@connect((state: any) => ({
  menu: state.menu,
  goodAdd: state.goodAdd,
}))
class SingleSpecification extends Component<any, any> {
  formRef = React.createRef<FormInstance>();
  atrriTable = React.createRef();
  static contextTypes = {
    dicData: PropTypes.any,
  };

  constructor(props: any) {
    super(props);
    this.state = {
      type: '1',
      attributeList: [],//附属属性信息
    };
  }

  componentDidMount() {
    this.props.onRef(this);
    if(sessionStorage.getItem('goodsaleInfo')){
      const saleInfo = JSON.parse(sessionStorage.getItem('goodsaleInfo') || '{}');
      this.formRef.current?.setFieldsValue(saleInfo);
    }else{
      this.formRef.current?.resetFields;
    }
  }
  componentWillMount() {
    if(sessionStorage.getItem('goodsaleInfo')){
      const saleInfo = JSON.parse(sessionStorage.getItem('goodsaleInfo') || '{}');
      this.setState({
        attributeList: saleInfo.attributeList,
      })
    }
  }
  ok= async ()=>{

  }
  getTableData = () =>{
    const tableData = this.atrriTable.getData();
      return tableData;
  }
  onChange =(val:any)=>{
    this.setState({
     type : val.target.value,
    })
   }

  goodPriceChange = (val:any) =>{
    const goodBasicInfo = JSON.parse(sessionStorage.getItem('goodBasicInfo') || '{}');
    if(goodBasicInfo.goodsMaxPrice){
    const maxPrice = parseFloat(goodBasicInfo.goodsMaxPrice);
    const currentPrice = parseFloat(val.target.value);
    if(maxPrice  && maxPrice <currentPrice) {
      message.warning('不得超过商品最高总价！')
    }
    }
   }
   discountPriceChange = (val:any)=>{
    const goodBasicInfo = JSON.parse(sessionStorage.getItem('goodBasicInfo') || '{}');
    if(goodBasicInfo.goodsMaxPrice){
    const maxPrice = parseFloat(goodBasicInfo.goodsMaxPrice);
    const currentPrice = parseFloat(val.target.value);
    if(maxPrice  && maxPrice <currentPrice) {
      message.warning('不得超过商品最高总价！')
    }
    }
   }
  render() {
    const {attributeList}=this.props;
    return (
      <>
        <Form ref={this.formRef} onFinish={this.ok}
         initialValues={{
          attributeInputMethod: 1,
        }}>
          <Row gutter={24}>
            <Col span={10}>
              <FormItem
               label="商品价格（元）"
               name="goodsPrice"
               rules={[{ required: true, message: '请输入商品价格,最多2位小数',whitespace: true, pattern: /^[0-9]+(.[0-9]{1,2})?$/}]}
              >
                <Input placeholder='请输入商品价格，最多2位小数' onChange={(val)=>{this.goodPriceChange(val)}}/>
              </FormItem>
          </Col>
          <Col span={10}>
              <FormItem
               label="商品折扣价"
               name="discountPrice"
               rules={[{ required: false, message: '请输入商品折扣价,最多2位小数',whitespace: true, pattern: /^[0-9]+(.[0-9]{1,2})?$/ }]}
              >
                <Input placeholder='请输入商品折扣价' onChange={(val)=>{this.discountPriceChange(val)}}/>
              </FormItem>
          </Col>
          </Row>
          <Row>
            <h2>附属属性</h2>
          </Row>
          <Row gutter={24}>
            <Col span={10}>
            <FormItem
               label="录入方式"
               name="attributeInputMethod"
               rules={[{ required: true, message: '请选择商品规格' }]}
              >
                <Radio.Group name="radiogroup"  onChange={this.onChange}>
                     <Radio value={1}>自定义</Radio>
                     <Radio value={2} disabled>按属性组</Radio>
                </Radio.Group>
              </FormItem>
            </Col>
            <Col>
            <span style={{color: 'red'}}>
             <p>1、录入方式切换，缓存之前各方式填写的附属属性值</p>
             <p>2、同一个商品下，附属属性不允许重复（添加附属属性时，不显示已选择的）</p>
            </span>
            </Col>
          </Row>
         {this.state.type == '2' && (
           <Row gutter={24}>
            <Col span={6}>
           <Select
             options={[
             {
               label: '请选择附属属性组',
               value: '0',
             },
             {
              label: '联通500M-一个月',
              value: '1',
            },
            {
              label: '联通1G一个月',
              value: '2',
            },
            {
              label: '联通2G一个月',
              value: '3',
            },
             ]}
            />
            </Col>
            <Col span={18}>
            <span style={{color:'red'}}>选择后将组下的附属属性字段带出，属性内容引用后可修改，修改后不影响原属性信息</span>
            </Col>
           </Row>
           )}
           <Row gutter={24}>
            <Col span={24}>
            <GoodsAttriTable 
             goodsInfo={ this.state.attributeList}
             dispatch={this.props.dispatch}
             onRef={(atrriTable:any) => (this.atrriTable = atrriTable)}
             attributeList={attributeList}
             />
             </Col>
           </Row>  
        </Form>
      </>
    );
  }
}

export default SingleSpecification;
